<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>姓名：{{name}}</h2>
    <h2>性别：{{sex}}</h2>
    <h2>年龄：{{myAge}}</h2>
    <button @click="updateAge">尝试修改年龄</button>
  </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            //不写这三个数据，从父组件传入数据
            // name: 'sgg',
            // sex: '男', 
            // age: 18,
            msg: '24岁是学生',
            myAge: this.age,  //用myAge复制age的数据
        }
    },
    methods:{
        updateAge() {
            //props接受的属性值不允许修改，虽然实际可以修改，但是Vue可能出现问题
            this.myAge ++ //修改myAge而不是修改age
        }
    },
    //props用于指定从父组件传入的参数，会被放到vc实例上，但不会在_data中
    //第一种写法，数组形式，顺序无所谓，类型全部为string
    // props: ['name', 'sex', 'age'],
    //第二种写法，接受数据时指定类型，如果类型错误会报错
    /*
    props: {
        name: String,
        sex: String,
        age: Number,
    },
    */
    //第三种写法，最完整写法，指定类型，必要性和默认值
    props: {
        name: {
            type: String, //指定类型
            required: true, //是否必传
        },
        age: {
            type: Number,
            required: false, //非必传
            default: 99, //不传时的默认值
        },
        sex: {
            type: String,
            required: true,
        },
    }
}
</script>